<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通告报名 - {$config.WEB_SITE_TITLE}</title>
    <script src="__PUBLIC__/Home/js/adaptive.js"></script>
    <script src="__PUBLIC__/Home/js/device.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/Home/css/reset.css">
    <link rel="stylesheet" href="__PUBLIC__/Home/css/con-header.css">
    <script src="__PUBLIC__/Home/js/mui.min.js"></script>
    <link href="__PUBLIC__/Home/css/mui.min.css" rel="stylesheet"/>

    <style>
        h4,h5{margin-top: 0px;margin-bottom: 0px;}
        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
            color: #9B9B9B;font-size: 0.3rem;
        }

        .content{width: 7.5rem;height: auto;margin: 0 auto;background: #fff;margin-top: 0.88rem;z-index: 10;padding-bottom: 1rem;}
        .top a{position: absolute;right: 0.3rem;bottom: 0.1rem;color: #fff;}
        .top{z-index: 100!important;}
        .top img.back{;position: absolute;left: 0.2rem;bottom: 0.2rem;z-index: 100}

         .xuanzi{width: 100%;height: 3.3rem;padding: 0.3rem;border-bottom: 1px solid #EEEEEE}
         .xuanzi p{font-size: 0.34rem;color: #333}
        .xuanzi ul{width: 100%;height: auto;display: flex;justify-content: space-around}
        .xuanzi ul li{width: 1.4rem;height: auto;text-align: center}
        .xuanzi ul li span{width:1.4rem;height: 1.4rem;;display: inline-block;margin-bottom: 0.1rem;position: relative;
            box-sizing: border-box; }
        .xuanzi ul li span img{width:1rem;height: 1rem;border-radius: 50%;margin-top: 0.1rem;}
         .sel span{border-radius: 50%;border: 0.1rem solid #01B0B8;}
         .sel{color:#01B0B8 ;}


        .xuanzi2{width: 100%;height: 2rem;padding: 0.3rem;border-bottom: 1px solid #EEEEEE}
        .xuanzi2 p{font-size: 0.34rem;color: #333}
        .xuanzi2 ul{width: 100%;height: auto;display: flex;justify-content: space-around}
        .xuanzi2 ul li{width: 1.4rem;height: 0.6rem;line-height: 0.6rem;
            text-align: center;
            border-radius: 0.5rem;border: 1px solid #DEDEDE;color: #666;
            }
        .sel2{color: #fff!important;  background: -webkit-linear-gradient(left,#015DB8, #01ADB8)}


        /*list1*/
        .list1{width: 100%;height: 2rem;border-bottom: 1px solid #EEEEEE;padding: 0.3rem;margin-top: 0.6rem;}
        .list1 li{height: 0.6rem;line-height: 0.6rem;font-size: 0.3rem;color: #333;}
        .list1 li span{float: right}
        .list1 li:nth-child(2) span{color: #FC6638;font-size: 0.34rem;}

        .list2{width: 100%;height: 3rem;padding: 0.3rem;margin-top: 0.6rem;}
        .list2 li{width: 100%;height: auto;border-bottom: 1px solid #EEEEEE;color: #4A4A4A;line-height: 0.9rem;position: relative;font-size: 0.32rem;}
        .list2 li input{width: 5.5rem;height: 0.88rem;border: none;outline: none;position: absolute;left: 1.5rem;text-align: right;line-height: 0.8rem; }


        /*报名*/
        .bm{width: 100%;height: 1rem;display: flex;justify-content: space-between;line-height: 1rem;border-top: 1px solid #EEEEEE}
        .bm span{width: 50%;text-align: center;font-size: 0.32rem;color: #333}
        .bm span b{color: #FC6638;font-size: 0.34rem;}
        .bm button{width: 50%;background: #01B0B8;color: #fff;font-size: 0.3rem}


        /*弹窗*/
        .tanchuang{width: 100%;height: 100%;background: rgba(0,0,0,0.2);position: fixed;top: 0px;z-index: 100;display: none}
        .tanchuang .tc{width: 4rem;height: 4.4rem;background: #fff;top: 2rem;border-radius: 0.2rem;text-align: center}
        .tanchuang .tc p:nth-child(1){color: #333;font-size: 0.38rem;margin-top: 0.5rem;}
        .tanchuang .tc p:nth-child(2){color: #01B0B8;font-size: 0.6rem;margin-top: 0.5rem}
        .tanchuang .tc span{width: 80%;height: 0.7rem;background:  -webkit-linear-gradient(left,#015DB8, #01ADB8); /* Safari 5.1 - 6.0 */ ;border-radius: 0.5rem;display: block;text-align: center;line-height: 0.7rem;
            position: relative;margin-top: 0.5rem; color: #fff; }
        .tanchuang .tc p:nth-child(4){color: #E4E4E4;font-size: 0.20rem;margin-top: 0.4rem}

    </style>
</head>
<body>


<div class="content">
    <div class="top">
        <h4>报名</h4>
        <img src="__PUBLIC__/Home/img/tg-fanhui.png" alt="" class="back">
    </div>
   <div class="xuanzi">
       <p>选择萌娃</p>
       <ul>
           <li class="sel"><span><img src="__PUBLIC__/Home/img/ertong.png" alt="" class="spjz"></span>
               童星姓名
           </li>
           <li class=""><span><img src="__PUBLIC__/Home/img/ertong.png" alt="" class="spjz"></span>
               童星姓名
           </li>
           <li class=""><span><img src="__PUBLIC__/Home/img/ertong.png" alt="" class="spjz"></span>
               童星姓名
           </li>
       </ul>
   </div>

    <div class="xuanzi2">
        <p>选择角色</p>
        <ul>
            <li class="sel2">
                角色1
            </li>
            <li class="">
                角色2
            </li>
            <li class="">
                角色3
            </li>

        </ul>
    </div>

    <ul class="list1">
        <li>认证用户 <span>￥7500.00</span></li>
        <li>VIP用户 <span>￥7200.00</span></li>
    </ul>
    <ul class="list2">
        <li>联系人 <input type="text" placeholder="请填写联系人姓名"></li>
        <li>联系方式 <input type="text" placeholder="请填写联系方式"></li>
    </ul>


    <div class="bm">
        <span>合计： <b>￥7500.00</b></span>
        <button class="submit">立即报名</button>
    </div>

<!--弹窗-->
    <div class="tanchuang">
        <div class="tc spjz">
            <p>积分奖励</p>
            <p>20</p>
            <span class="juzhong">确认</span>
             <p>分享通告即可获得积分奖励</p>
        </div>
    </div>
</div>
<script src="__PUBLIC__/Home/js/jquery-1.11.1.js"></script>
<script>
    $(".back").click(function () {
        window.history.back(-1);
    })




</script>

<script>
   $(".xuanzi ul li").click(function () {
       $(this).addClass("sel").siblings().removeClass();
   })
   $(".xuanzi2 ul li").click(function () {
       $(this).addClass("sel2").siblings().removeClass();
   })
//点击报名
   $(".submit").click(function () {
       $(".tanchuang").show();
   })
   $(".juzhong").click(function () {
       $(".tanchuang").hide();
   })
</script>
</body>
</html>